<template>
  <div class="login">
      <div class="logo">
      <img
        src="https://assets.maizuo.com/h5/mz-auth/public/app/img/logo.19ca0be.png"
        alt=""
      />
    </div>
    <el-container>
        
      <!-- <el-header>登录</el-header> -->
      <el-main>
        <!-- 表单 -->
        <el-form :rules="rules" :model="formData" ref="formData">
            <div class="text">
          <el-form-item label="" prop="mobile">
            
            <input class="phone" placeholder="手机号" v-model="formData.mobile" maxlength="11">
            <div class="code">请输入验证码</div>
            
          </el-form-item>
          </div>
          <el-form-item label="" prop="password">
            <input
            class="pass"
              placeholder="密码"
              type="password"
              v-model="formData.password"
            >
          </el-form-item>
          <!-- <el-form-item> -->
            <div class="btn" @click="submitForm('formData')"> 
            <span>登录</span>
            </div>
          <!-- </el-form-item> -->
        </el-form>
      </el-main>
      
      
    </el-container>
    <div class="register" @click="zc()">还没有账号?点击注册</div>
  </div>
</template>

<script>
import { userLogin } from "@/api/api";
export default {
  data() {
    return {
      formData: {
        mobile: "",
        password: "",
      },
      rules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不正确！",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  // 进入的时候去掉底部导航
  created() {
    // this.$nextTick(()=>{
    // this.eventBus.$emit("footernav", false);

    // })
    setTimeout(()=>{
    this.eventBus.$emit("footernav", false);

    },0)

  },
 
  methods: {
    submitForm: function(formName) {
        console.log('进入submitForm里面了')
        //这里的async 是因为里面有异步请求 
      this.$refs[formName].validate(async (valid) => {
          // valid的意思是  必须rules 那里全是true 全部效验通过 valid才会变为true   
          console.log('valid',valid)
        if (valid) {
            console.log('valid为true了')
          // 获取用户名和密码进行提交（API）
          let ret = await userLogin(this.formData);
          console.log(ret);
          
          if (ret.data.code == 1000) {
            // 登录成功（存储token、跳转）
                console.log('进入code1000里面了')
                console.log(ret.data.data.mobile);
                //我们往 vuex 总商店触发mutation变异器 去改变里面的mobile 
            this.$store.commit("usermobile", ret.data.data.mobile);
            this.$store.commit('tokenadd',ret.data.data._token)
            console.log('传入token了，去看看有没有');
            //为了持久化存储 我们把token 放进去localstorage里面
            localStorage.setItem('_token',ret.data.data._token)
            this.$message({
              message: "success 即将跳转个人中心",
              type: "success",
            });
            setTimeout(()=>{
                this.$router.push({ path: "/center" });
            },3000)
             
          } else {
            // 登录失败
            console.log("我进入登陆失败了");
            this.$message({
              message: "fail",
              type: "warning",
            });
            alert(ret.data.info);
          }
        }
      });

    },
    zc(){
      this.$router.push('/zc')
    }

  },
   // 出来的时候显示底部导航
  //页面销毁之前
  beforeDestroy() {
    this.eventBus.$emit("footernav", true);
  },
};

</script>

<style lang="scss" scoped>
.logo {
  height: 60px;

  display: flex;
  margin:80px 0 40px 0;

  justify-content: center;
  img {
    width: 60px;
    height: 60px;
  }
}
.phone,.pass{
font-size: 15px;
  height: 44px;
  width: 300px;
  background: #f4f4f4;
  border-bottom: 1px solid gray;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  margin-left: 16px;
}
.text{
    position: relative;
}
.code{
    position: absolute;
    right: 0px;
    top: 2px;
    right: 60px;
    color: #bdc0c5;
}

// .login {
//   padding-top: 80px;
//   .el-container {
//     width: 80%;
//     margin-left: 40px;
//     .el-header {
//       font-size: 23px;
//     }
//   }
// }
.btn {
  line-height: 45px;
  font-size: 16px;
  margin: 80px 16px 0;
  border-radius: 3px;
  text-align: center;
  background-color: #ff5f16;
  width: 300px;
  height: 45px;
  color: #fff;
}
.register{
  text-align: right;
  margin-top: 50px;
  padding-right: 75px;
color: #bdc0c5;
}
</style>
